<template>
    <div class="registerBox clear-fix">
        <div class="box"></div>
        <div class="logo">
            <img :src="dataInfos.dataInfo.logo" alt>
        </div>
        <div class="login mixInput">
            <p class="alertNumText" ref="alertNumText"></p>
            <div class="loginPhone">
                <i class="icon-shouji1 iconfont"></i>
                <input placeholder="请输入您的手机号"
                 v-model="telNumber"
                 @blur="checkTel"
                 ref="telNumber"
                :class="{active:telFlag}"
                 >
            </div>
            <div class="loginPhone">
                <i class="icon-unie65b iconfont"></i>
                <input placeholder="密码" v-model="psd">
            </div>
            <div class="staticMix">
                <router-link to="/register">
                    <span class="register">立即注册</span>
                </router-link>
                <span class="forgotpsd">忘记密码</span>
            </div>
        </div>
        <div class="submitBox">
            <button @click="clickHandler" :isdisabled ="flag" >登录</button>
        </div>
        <div class="otherLogin">
            <span>其他登录方式</span>
            <p>
                <i class="iconfont icon-weibo"></i>
                <i class="iconfont icon-qq"></i>
                <i class="iconfont icon-weixin"></i>
            </p>
        </div>
    </div>
</template>
<script>
//1.引入mapMutatios  ==> import { mapMutations } from "vuex"
//2.展开 ==> ...mapMutations(["setToten"]),
//3.进行赋值操作 ==>  this.setToten(this.telNumber);
import { mapMutations } from "vuex"

export default {
    name: "loginListView",
    data() {
        return {
            telNumber: "",
            psd: "",
            // userInfo: {},
            // dataInfo: [],
            flag:true,
            telFlag:false,
        };
    },
    props: {
        dataInfos: {
            type: Object,
            dafault: function() {
                return {};
            }
        }
    },
    methods: {

        ...mapMutations(["setToten"]),

        //失焦手机号验证
        checkTel(){
            if(!(/^1[3|4|5|8][0-9]\d{8}$/.test( this.telNumber))){ 
                this.$refs.alertNumText.innerHTML = "手机号不规范请重新输入！"
                this.telFlag = true;
            } 
        },
        clickHandler() {
            this.$api.userinfo
                .dataInfo({
                    username:this.telNumber,
                    password:this.psd
                })
                .then(res => {
                    console.log(res.data);
                    if(res.data.length>0){
                        // 登录成功
                        localStorage.setItem("token",res.data[0].tel);
                        this.flag = false;
                        this.$router.replace("/mine");
                        //调用mutations里面的方法并进行传值
                        this.setToten(this.telNumber);

                    }else{
                        // 登录失败
                        console.log("登录失败"),
                        alert("登陆失败,用户名不存在或者密码错误"),
                        this.telNumber ="",  //清空之前的值
                        this.psd = ""
                        this.flag = true;
                        this.telFlag = true;
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
       
    
    },
    mutation: {

    }
};
</script>

<style lang="less" scoped>
input::-webkit-input-placeholder {
    color: #fff;
}
.registerBox {
    color: #000;
    background-color: #000;
    .logo {
        height: 13rem;
        line-height: 13rem;
        text-align: center;
        background-color: #000;
        img {
            width: 100px;
        }
    }
}
.mixInput {
    width: 14rem;
    margin: 0 auto;
    .alertNumText{
        height:1rem;
        line-height:1rem;
        color:red;
        font-size:18/20rem;
        padding-left:55px;
        box-sizing: border-box;
        font-style:italic;
    }
    .loginPhone {
        margin-top: 5px;
        width: 100%;
        height: 2rem;
        border-bottom: 1px solid #fff;
        position: relative;
        .active{
            color:yellowgreen;
        }
        input {
            margin: 0 0 0 55px;
            height: 100%;
            line-height: 58px;
            color: #fff;
        }

        i {
            color: #fff;
            font-size: 1.5rem;
            position: absolute;
            left: 5px;
            top: 5px;
            color: #fed906;
        }
    }
}
.staticMix {
    color: #fff;
    margin: 1.5rem 0;
    height: 0.5px;
    line-height: 0.5px;
    .register {
        float: left;
        color: #fff;
    }
    .forgotpsd {
        float: right;
    }
}
.submitBox {
    margin: 2rem 0;
    text-align: center;
    button {
        width: 14rem;
        height: 2.5rem;
        margin: 0 auto;
        background-color: #fed906;
        font-size: 1rem;
        border-radius: 10px;
        outline: none;
        color:#000;
        
    }
}
.otherLogin {
    width: 14rem;
    margin: 1rem auto;
    border-top: 1px solid #fff;
    position: relative;
    text-align: center;
    span {
        color: #fff;
        position: absolute;
        width: 140px;
        height: 30px;
        border: 1px solid transparent;
        text-align: center;
        left: 50%;
        margin-left: -70px;
        top: 0;
        margin-top: -15px;
        background-color: #000;
    }
    .iconfont {
        color: #fff;
        font-size: 2rem;
        margin: 2rem 5px;
        height: 2rem;
        display: inline-block;
    }
    p {
        position: relative;

        .icon-weibo {
            float: left;
            position: absolute;
            left: 0;
        }
        .icon-weixin {
            float: right;
            position: absolute;
            right: 0;
        }
    }
}
</style>

















